import React from 'react';
import { Card, Modal, Button } from 'antd';
import PropTypes from 'prop-types';
import DescriptionList from '../../components/DescriptionList';
import { getDicByKey } from "@/support/common";
import MaskText from '@/components/MaskText'

const { Description } = DescriptionList;
class simCardDetailModal extends React.PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
  };
  render() {
    const { changeVisible, detailModelData } = this.props;
    return (
      <Modal
        title="详细信息"
        style={{ top: 20 }}
        width="700px"
        visible={this.props.visible}
        onCancel={() => changeVisible()}
        footer={[
          <Button key="back" type="primary" size="small" onClick={() => changeVisible()}>
            返回
          </Button>,
        ]}
      >
        <div>
          <Card bordered={false} size="small" type="inner">
            <DescriptionList title="" col={2}>
              <Description term="IMSI"style={{ width: '50%' }}>{detailModelData.deviceId}</Description>
              <Description term="ICCID"style={{ width: '50%' }}>{detailModelData.iccid}</Description>
              <Description term="SIM卡号"style={{ width: '50%' }}>
                <MaskText text={detailModelData.msisdn} type='simCard' />
              </Description>
              <Description term="运营商品牌"style={{ width: '50%' }}>
                {getDicByKey(this.context.dicData, 'carrierBrand',
                  (detailModelData.carrierBrand || detailModelData.carrierBrand === 0) ?
                    detailModelData.carrierBrand.toString() :
                    detailModelData.carrierBrand)}
              </Description>
              <Description term="套餐类型"style={{ width: '50%' }}>
                {getDicByKey(this.context.dicData, 'simModel', detailModelData.simModel)}
              </Description>
              <Description term="联通套餐ID"style={{ width: '50%' }}>{detailModelData.unicomPkgId}</Description>
              <Description term="支付类型"style={{ width: '50%' }}>
                {getDicByKey(this.context.dicData, 'payType', detailModelData.payType)}
              </Description>
              <Description term="采购商"style={{ width: '50%' }}>
                {getDicByKey(this.context.dicData, 'purchaser', detailModelData.purchaser)}
              </Description>
              <Description term="激活状态"style={{ width: '50%' }}>
                {getDicByKey(this.context.dicData, 'simStatus',
                  (detailModelData.simStatus || detailModelData.simStatus === 0) ?
                    detailModelData.simStatus.toString() :
                    detailModelData.simStatus)}
              </Description>
              <Description term="激活时间"style={{ width: '50%' }}>{detailModelData.activeTime}</Description>
              <Description term="生产日期"style={{ width: '50%' }}>{detailModelData.produceDate}</Description>
              <Description term="入库时间"style={{ width: '50%' }}>{detailModelData.createDate}</Description>
              <Description term="备注"style={{ width: '50%' }}>{detailModelData.remark}</Description>
            </DescriptionList>
          </Card>
        </div>
      </Modal>
    );
  }
}

export default simCardDetailModal;
